<template>
    <div class="bg" :class="bgColor">
        <div class="left">
            <p class="title">BMI指数</p>
            <div class="input-box">
                <font class="input-title">体重（kg）：</font>
                <input class="input"  :class="bgColor" type="number" placeholder="请输入体重" v-model="weight">
            </div>
            <div class="input-box">
                <font class="input-title">身高（cm）：</font>
                <input class="input"  :class="bgColor" type="number" placeholder="请输入身高" v-model="height">
            </div>
            <div class="input-bt">
                <button class="bt" :class="bgColor" @click="countBMI">生成指数</button>
                <button class="bt" :class="bgColor" @click="reset">重置</button>
            </div>
        </div>
        <div class="right">
            <div class="data-show" v-show="!BMInumber">
                <div class="index-box" v-for="item in list" :key="item.key">
                    <p class="index-title">{{item.key}}</p>
                    <p class="index-value">{{item.value}}</p>
                </div>
            </div>
            <div class="result" v-show="BMInumber">
                <p class="result-title">您的BMI指数为：</p>
                <p class="result-num">{{BMInumber}}</p>
                <div v-for="item in list" :key="item.key">
                    <div v-if="BMInumber >= item.min && BMInumber <= item.max">
                        <p class="result-key">{{item.key}}</p>
                        <p class="result-value">{{item.value}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            height:"",
            weight:"",
            BMIindex:0,
            bgColor:"white",
            BMInumber:0,
            list:[
                {
                    key:"偏瘦",
                    value:"<= 18.4",
                    min:0,
                    max:18.4
                },
                {
                    key:"正常",
                    value:"18.5 ~ 23.9",
                    min:18.5,
                    max:23.9
                },
                {
                    key:"过重",
                    value:"24.0 ~ 27.9",
                    min:24.0,
                    max:27.9
                },
                {
                    key:"肥胖",
                    value:">= 28.0",
                    min:28.0,
                    max:Infinity
                },
            ]
        }
    },
    mounted() {
        
    },
    methods: {
        countBMI(){
            let weight = parseFloat(this.weight)
            let height = parseFloat(this.height)
            if(weight > 0 && height > 0){
                this.BMInumber = (weight / Math.pow((height / 100),2)).toFixed(1)
                console.log("这是",this.BMInumber);
                if(this.BMInumber == 0){
                        this.bgColor = 'white'
                }else if(this.BMInumber <= 18.4){
                        this.bgColor = 'blue'
                }else if(this.BMInumber <= 23.9){
                        this.bgColor = 'green'
                }else if(this.BMInumber <= 27.9){
                        this.bgColor = 'orange'
                }else{
                        this.bgColor = 'red'
                }
            }else{
                alert("请输入正整数数字")
            }
        },
        reset(){
            this.bgColor = 'white'
            this.BMInumber = 0
            this.weight = ""
            this.height = ""
        },
    },
    
}
</script>

<style scoped lang="less">
.bg{
    color: black;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    transition: all 0.5s ease-in-out;
}
.left{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 400px;
    font-size: 25px;
    .title{
        font-size: 40px;
        font-weight: bold;
    }
    .input-box{
    .input{
        font-size: 25px;
        font-family: 'PMXFONT';
        outline: none;
        border: none;
        border-bottom: 1px solid #ccc;
        list-style: none;
        transition: all 0.5s ease-in-out;

    }
    }
    .input-bt{
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        .bt{
            font-size: 25px;
            border: none;
            background-color: #fff;
            transition: all 0.5s ease-in-out;
        }
        .bt:hover{
            opacity: 0.5;
        }
    }
}
.right{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    .data-show{
        transition: all 0.5s ease-in-out;
    }
    .result{
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 400px;
        transition: all 0.5s ease-in-out;
        color: white;
        .result-title{
            font-size: 30px;
        }
        .result-num{
            font-size: 70px;
            font-weight: bold;
        }
        .result-key{
            font-size: 70px;
        }
        .result-value{
            font-size: 30px;
        }
    }
    .index-box{
        overflow: hidden;
        width: 400px;
        height: 100px;
        text-align: center;
        transition:all 0.2s ease-in-out;
    }
    .index-box:nth-child(1){
        background-color: #0095ff;
        color: white;
    }
    .index-box:nth-child(2){
        background-color: #66cc00;
        color: white;
    }
    .index-box:nth-child(3){
        background-color: #ff9900;
        color: white;
    }
    .index-box:nth-child(4){
        background-color: #ff0000;
        color: white;
    }
    .index-title{
        font-size: 40px;
        margin: 20px 0 50px;
    }
    .index-value{
        font-size: 20px;
    }
    .index-box:hover{
        height: 200px;
        box-shadow: 0px 0px 5px 1px rgb(184, 184, 184);
    }
}
.blue{
    background-color: #0095ff !important;
    color: white;
}
.white{
    background-color: #fff !important;
    color: black;
}
.green{
    background-color: #66cc00 !important;
    color: white;
}
.orange{
    background-color: #ff9900 !important;
    color: white;
}
.red{
    background-color: #ff0000 !important;
    color: white;
}
</style>